<template>
  <view class="home-page">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="welcome">
        <view class="welcome-title">欢迎回来</view>
        <view class="welcome-desc">一站式任务交易平台</view>
      </view>
      <view class="search-box">
        <input class="search-input" type="text" placeholder="来搜一下" placeholder-style="color: rgba(45, 137, 113, 0.5);;font-size:28rpx;" />
        <image class="search-icon" src="/static/search-icon.png" mode="aspectFit"></image>
      </view>
      <view class="logo-bg">
        <image src="/static/容器 5155@1x.png " mode="aspectFit" style="width: 44px; height: 55px;"></image>
      </view>
      <view class="tags">
        <text class="tag-item">发布快</text>
        <text class="tag-item">接单快</text>
        <text class="tag-item">赚钱快</text>
      </view>
    </view>

    <!-- 发布任务提示 -->
    <view class="publish-tip">
      <image class="tip-icon" src="/static/header-icon.png" mode="aspectFit" ></image>
      <view class="tip-text">
        <view class="tip-main">发布任务，马上有人接</view>
        <view class="tip-sub">海量抢单高手在线待命</view>
      </view>
    </view>

    <!-- 公告 -->
    <view class="notice">
      <image src="/static/image@1x.png" style="width: 20px; height: 12px;"></image>
      <text class="notice-tag">公告|</text>
      <text class="notice-content">XXX刚刚接了一单</text>
    </view>

    <!-- 任务列表 -->
    <view class="task-list">
      <view class="task-tabs">
        <text class="tab-item active">推荐任务</text>
        <text class="tab-item">最新任务</text>
      </view>
      <view class="tasks">
        <view class="task-item" v-for="(task, index) in tasks" :key="index">
          <text class="task-id">任务编号：{{ task.id }}</text>
          <view class="task-title-wrap">
            <text class="task-title">{{ task.title }}</text>
            <text class="task-status">{{ task.status }}</text>
          </view>
          <view class="task-publisher">
            <view style="width: 64rpx; height: 64rpx; background-color: #11be86; border-radius: 64rpx; display: flex; align-items: center; justify-content: center;">
              <image class="publisher-avatar" :src="task.avatar" mode="aspectFit" @click="goToUserInfo"></image>
            </view>
            <view class="publisher-info">
              <text class="publisher-name">{{ task.publisher }}</text>
              <text class="publisher-auth">已实名</text>
              <text class="publisher-phone">{{ task.phone }}</text>
            </view>
            <view class="task-meta">
              <text class="quote-info">{{ task.quoteInfo }}</text>
              <text class="task-types">{{ task.types }}</text>
            </view>
          </view>
          <text class="task-desc">{{ task.desc }}</text>
          <view class="task-imgs">
            <image class="task-img" :src="img" mode="aspectFit" v-for="(img, imgIndex) in task.imgs" :key="imgIndex"></image>
          </view>
          <button class="quote-btn">去报价</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟任务列表数据
const tasks = ref([
  {
    id: '2025080100232',
    title: '这里是任务标题',
    status: '报价中',
    avatar: '/static/avatar1.png',
    publisher: '王先生',
    phone: '***********',
    quoteInfo: '报价人员1/10',
    types: 'DFM',
    desc: '这里是任务说明，这是一个XX任务，需要在XX的时候对XX进行编辑和维护。',
    imgs: ['/static/task-img1.png', '/static/task-img2.png', '/static/task-img3.png']
  },
  {
    id: '2025080100232',
    title: '这里是任务标题',
    status: '报价中',
    avatar: '/static/avatar1.png',
    publisher: '王先生',
    phone: '***********',
    quoteInfo: '报价人员1/10',
    types: 'DFM',
    desc: '这里是任务说明，这是一个XX任务，需要在XX的时候对XX进行编辑和维护。',
    imgs: ['/static/task-img1.png', '/static/task-img2.png', '/static/task-img3.png']
  },
  {
    id: '2025080100232',
    title: '这里是任务标题',
    status: '报价中',
    avatar: '/static/avatar1.png',
    publisher: '王先生',
    phone: '***********',
    quoteInfo: '报价人员1/10',
    types: 'DFM、2D、BOM',
    desc: '这里是任务说明，这是一个XX任务，需要在XX的时候对XX进行编辑和维护。',
    imgs: ['/static/task-img1.png', '/static/task-img2.png', '/static/task-img3.png']
  }
]);

const handleTaBbar = (e) => {
  console.log('跳转到忘记密码页面');
  uni.navigateTo({ url: e });
};
const goToUserInfo = () => {
  uni.navigateTo({
    url: '/pages/user/user'
  })
}
</script>

<style scoped>
.home-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  z-index: 0;
  padding-top: 420rpx;
}

.header {
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 230px;
  padding-top: 88px;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-bottom: 40rpx;
  border-radius: 0px 0px 20px 20px;
  opacity: 1;
  background: linear-gradient(243deg, #00BE8D 0%, #B2FFEB 94%), #00BE8D;
}

.welcome {
  width: 126px;
  height: 47px;
  margin-bottom: 20rpx;
}

.welcome-title {
  width: 68px;
  height: 26px;
  font-size: 17px;
  font-weight: bold;
  color: #1C2C28;
}

.welcome-desc {
  font-size: 28rpx;
  color: #2D8971;
}

.header-icon {
  width: 126px;
  height: 21px;
  color: #2D8971;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  width: 120rpx;
  height: 120rpx;
}

.search-box {
  display: flex;
  position: relative;
  align-items: center;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 30rpx;
  z-index:2;
}

.search-input {
  flex: 1;
  height: 80rpx;
  color: rgba(45, 137, 113, 0.5);
  font-size: 28rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
}

.logo-bg {
  position: absolute;
  left: 254px;
  top: 61px;
  width: 70px;
  height: 85px;
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 1;  
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 187, 141, 0) 0%, rgba(3, 187, 141, 0.2) 100%), #FFFFFF;
  padding: 24rpx 26rpx 36rpx 26rpx;
}

.banner {
  
}

.tags {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.tag-item {
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #2D8971;
}

.publish-tip {
 display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #e6f7ef; */
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx;
  background: linear-gradient(180deg, rgba(217, 255, 245, 0.5804) 0%, rgba(217, 255, 245, 0.13) 37%), #FFFFFF;
  
  z-index: 3;
}

.tip-icon {
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}

.tip-main {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.tip-sub {
  font-size: 28rpx;
  text-align: right;
  color: #2D8971;
}

.notice {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  margin: 0 20rpx;
}

.notice-tag {
  background-color: #fff;
  color: #00bfa5;
  font-size: 24rpx;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
  margin-right: 10rpx;
}

.notice-content {
  font-size: 26rpx;
  color: #666;
}

.task-list {
  margin: 30rpx;
}

.task-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  padding-bottom: 10rpx;
}

.tab-item {
  margin-right: 40rpx;
  font-size: 30rpx;
  color: #666;
}

.tab-item.active {
  color: #00bfa5;
  font-weight: bold;
  border-bottom: 2px solid #00bfa5;
  padding-bottom: 8rpx;
}

.tasks {
  margin-top: 20rpx;
}

.task-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.task-id {
  font-size: 26rpx;
  color: #999;
}

.task-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10rpx 0;
}

.task-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.task-status {
  background-color: #e6f7ef;
  color: #00bfa5;
  font-size: 26rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.task-publisher {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.publisher-avatar {
  width: 24rpx;
  height: 24rpx;
}

.publisher-info {
  flex: 1;
}

.publisher-name {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.publisher-auth {
  background-color: #00bfa5;
  color: #fff;
  font-size: 22rpx;
  padding: 2rpx 8rpx;
  border-radius: 5rpx;
}

.publisher-phone {
  font-size: 24rpx;
  color: #999;
}

.task-meta {
  text-align: right;
}

.quote-info {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.task-types {
  font-size: 26rpx;
  color: #333;
}

.task-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
  margin: 10rpx 0;
}

.task-imgs {
  display: flex;
  justify-content: flex-end;
  margin: 10rpx 0;
}

.task-img {
  width: 80rpx;
  height: 80rpx;
  margin-left: 10rpx;
  border-radius: 10rpx;
}

.quote-btn {
  background-color: #fff;
  color: #00bfa5;
  border: 1px solid #00bfa5;
  font-size: 28rpx;
  border-radius: 40rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  margin: 10rpx 0 0 auto;
}

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #eee;
  padding: 15rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-item.active .nav-text {
  color: #00bfa5;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}
</style>